<template>
	<view class="c-wrap pledge" v-if="userInfo && cfg">
		<ice-header :account="userInfo.nickname"></ice-header>
		<view class="pledge-main">
			<view class="pledge-title">MATIC</view>
			<view class="pledge-ipt">
				<view class="ipt-main">
					<view class="ipt">
						<input class="font-26" type="number" v-model="money" :placeholder="lang.请输入锁仓MATIC数量" />
					</view>
				</view>
			</view>
			<view class="theme-color ice-mt-15 font-26">{{lang.必须是的倍数代币起步}}</view>

			<view class="pledge-choice">
				<view class="choice-title">{{lang.选择质押周期}}</view>
				<view class="choice-list" @click="choose(idx)" :class="item.choose?'active':''" v-for="(item,idx) in goods" :key="idx">
					<view class="list-main">
						<view class="list-left">{{item.desc}}</view>
						<view class="list-right">
							<img v-if="item.choose"
								src=""
								alt="">
							<img v-else
									src=""
									alt="">
						</view>
					</view>
				</view>
			</view>

			<u-button @click="buy" class="ice-mt-30" type="primary" :hairline="false" shape="circle">{{lang.质押}}</u-button>
			<u-button @click="goOrder" class="ice-mt-30" type="primary" :hairline="false" color="#1f1c68"
				shape="circle">{{lang.质押记录}}</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				goods:[],
				money:'',
				cfg:null,
			}
		},
		computed: {
			lang() {
				this.getGoods()
				return {
					"质押": this.$t('质押'),
					"质押记录": this.$t('质押记录'),
					"请输入锁仓MATIC数量": this.$t('请输入锁仓MATIC数量'),
					"选择质押周期": this.$t('选择质押周期'),
					"必须是的倍数代币起步": this.$t('必须是 的倍数, 代币起步', {
						bei: this.cfg&&this.cfg.zhiya_beishu,
						num: this.cfg&&this.cfg.zhiya_min,
					}),
				}
			},
		},
		async onLoad(e) {
			console.log(e)
			await uni.$ice.checkLogin()
			this.getUserInfo()
			this.getCfg()
			
		},
		methods: {
			getCfg() {
				this.goods = [];
				uni.$ice.post('index/cfg', {}, false).then(res => {
					this.cfg = res.data;
			
				}).catch(err => {
			
				})
			},
			goOrder(){
				uni.navigateTo({
					url:'/pages/user/order2'
				})
			},
			getUserInfo() {
				let tmp = uni.getStorageSync('userInfo')
				if (tmp) {
					this.userInfo = JSON.parse(tmp)
				}
				uni.$ice.post('user/index', {}, false).then(res => {
					uni.setStorageSync('userInfo', JSON.stringify(res.data));
					this.userInfo = res.data
					if(this.userInfo.username != uni.$ice.walletAddress){
						uni.removeStorageSync("token")
						location.reload();
					}
					uni.stopPullDownRefresh()

				}).catch(err => {

				})
			},
			getGoods() {
				this.goods = [];
				uni.$ice.post('order/goods2', {}, false).then(res => {
					this.goods = res.data;
			
				}).catch(err => {
			
				})
			},
			choose(idx){
				for (let item in this.goods) {
					if(item == idx){
						this.goods[item].choose = true
					}else{
						this.goods[item].choose = false
					}
				}
			},
			buy(){
				let chooseId = 0;
				for (let i in this.goods) {
					if(this.goods[i].choose){
						chooseId = this.goods[i].id;
					}
				}
				
				uni.$ice.post('order/buy2', {money:this.money,id:chooseId}, true).then(res => {
					this.getUserInfo()
					uni.showModal({
						title:this.$t("提示"),
						content:res.msg,
						showCancel:false,
					})
							
				}).catch(err => {
							
				})
			}
		}
	}
</script>

<style scoped>
	.pledge-main {
		margin: 40rpx 40rpx;
		position: relative;
		padding: 40rpx 54rpx 56rpx 44rpx;
		/* background-image: url("../../static/rectangle.png"); */
		background-size: 100% 100%;
		background-position: 50%;
		background-repeat: no-repeat;
	}

	.pledge-title {
		font-size: 42rpx;
		color: #fff;
		position: relative;
		z-index: 9;
	}

	.pledge-ipt {
		width: 100%;
		box-sizing: border-box;
		margin-top: 1.6%;
		position: relative;
		z-index: 9;
		padding: 40rpx 54rpx 40rpx 44rpx;
		background-image: url("../../static/intput-bg.png");
		background-size: 100% 100%;
		background-position: 50%;
		background-repeat: no-repeat;
		box-sizing: border-box;
	}

	

	.pledge .pledge-main .pledge-choice{
		margin-top: 32rpx;
		width: 100%
	}

	.pledge .pledge-main .pledge-choice .choice-title{
		color: #fff;
		font-size: 36rpx
	}

	.pledge .pledge-main .pledge-choice .choice-list{
		width: 100%;
		position: relative;
		margin-top: 46rpx;
		background-image: url("../../static/btn-bg2.png");
		background-size: 100% 100%;
		background-position: 50%;
		background-repeat: no-repeat;
		color: #fff
	}

	.pledge .pledge-main .pledge-choice .choice-list .list-main{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 40rpx
	}

	.pledge .pledge-main .pledge-choice .choice-list .list-main .list-right img{
		width: 40rpx
	}

	.pledge .pledge-main .pledge-choice .active{
		background-image: url("../../static/btn-bg.png")
	}

	.pledge .pledge-main .pledge-btn1{
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		background-image: url(/h5/static/矩形122.png);
		background-size: 100% 100%;
		background-position: 50%;
		background-repeat: no-repeat;
		color: #fff;
		font-size: 32rpx;
		padding: 20rpx;
		margin-top: 32rpx;
	}

	.pledge .pledge-main .pledge-btn2{
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		background-image: url();
		background-size: 100% 100%;
		background-position: 50%;
		background-repeat: no-repeat;
		color: #fff;
		font-size: 32rpx;
		padding: 20rpx;
		margin-top: 32rpx;
	}

	.pledge .pledge-main .pledge-count{
		width: 100%;
		padding-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff
	}
</style>